<template>
  <div class="common-layout">
    <el-row :gutter="0">
      <el-col :span="8" class="no-padding">
        <el-row :gutter="0">
          <el-col :span="24">
            <el-container
              class="flex with-border headToolbar"
              direction="horizontal"
              style="width: 100%"
            >
              <el-text class="mx-1">迁移学习：</el-text>
              <el-switch
                v-model="value5"
                class="ml-2"
                inline-prompt
                style="
                  --el-switch-on-color: #13ce66;
                  --el-switch-off-color: #ff4949;
                "
                active-text="开启"
                inactive-text="关闭"
              />
            </el-container>
          </el-col>
        </el-row>
        <el-row :gutter="0">
          <el-col :span="24">
            <el-container
              class="flex with-border headToolbar"
              direction="horizontal"
              style="width: 100%"
            >
              <el-text class="mx-1">监测模型PSI状态：达标/不达标 </el-text>
            </el-container>
          </el-col>
        </el-row>
        <div class="with-border" style="width: 100%">
          <div class="flex" style="height: 100px">
            这是个PSI变化曲线 显示异常后与更新后的一段时间
          </div>
        </div>
        <el-row :gutter="0">
          <el-col :span="24">
            <el-container
              class="flex with-border headToolbar"
              direction="horizontal"
              style="width: 100%"
            >
              <el-text class="mx-1">异常时间戳： </el-text>
            </el-container>
          </el-col>
        </el-row>
        <el-row :gutter="0">
          <el-col :span="24">
            <el-container
              class="flex with-border headToolbar"
              direction="horizontal"
              style="width: 100%"
            >
              <el-text class="mx-1">运行模型版本：V.20250428_152201 </el-text>
            </el-container>
          </el-col>
        </el-row>
        <el-row :gutter="0">
          <el-col :span="24">
            <el-container
              class="flex with-border headToolbar"
              direction="horizontal"
              style="width: 100%"
            >
              <el-text class="mx-1">退化模型PSI状态：达标/不达标 </el-text>
            </el-container>
          </el-col>
        </el-row>
        <div class="with-border" style="width: 100%">
          <div class="flex" style="height: 100px">
            这是个PSI变化曲线 显示异常后与更新后的一段时间
          </div>
        </div>
        <el-row :gutter="0">
          <el-col :span="24">
            <el-container
              class="flex with-border headToolbar"
              direction="horizontal"
              style="width: 100%"
            >
              <el-text class="mx-1">异常时间戳： </el-text>
            </el-container>
          </el-col>
        </el-row>
        <el-row :gutter="0">
          <el-col :span="24">
            <el-container
              class="flex with-border headToolbar"
              direction="horizontal"
              style="width: 100%"
            >
              <el-text class="mx-1">运行模型版本：V.20250428_152201 </el-text>
            </el-container>
          </el-col>
        </el-row>
      </el-col>

      <el-col :span="16">
        <div class="with-border">
          <el-row class="with-border" style="height: 300px">
            <el-row :gutter="8">
              <el-col :span="12">
                <div class="with-border" style="height: 280px">
                  这是一个TCN的网络结构图 标注更新前的网络参数
                </div>
              </el-col>
              <el-col :span="12">
                <div class="with-border" style="height: 280px">
                  这是一个seq2seq的网络结构图 标注更新前的网络参数
                </div>
              </el-col>
            </el-row>
          </el-row>
          <el-row class="with-border" style="height: 305px">
            <el-row :gutter="8">
              <el-col :span="12">
                <div class="with-border" style="height: 280px">
                  这是一个TCN的网络结构图 标注更新后的网络参数
                </div>
              </el-col>
              <el-col :span="12">
                <div class="with-border">
                  <el-row class="with-border">
                    <div style="height: 280px">
                      这是一个seq2seq的网络结构图 标注更新后的网络参数
                    </div>
                  </el-row>
                </div>
              </el-col>
            </el-row>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"; // 确保 onMounted 被导入
// import { useRoute } from 'vue-router'
// import { useStore } from 'vuex'
// import { ElMessage } from 'element-plus'
// import { useI18n } from 'vue-i18n'
// import LineChart from "@/views/dashboard/components/LineChart.vue"; // 如果LineChart.vue没有用到，可以注释掉
const value5 = ref(true);

// const value = ref(""); // 如果 value 没有用到，可以注释掉

// 假设 chart 是一个 ref，并且在模板中或通过其他方式被正确初始化
// 如果 chart 不是一个 ref 或者没有被正确使用，下面 onMounted 中的代码可能会报错
// const chart = ref(null); // 示例：如果 chart 是一个 echarts 实例的 ref

onMounted(() => {
  // 大小自适应
  // 这段代码假设你有一个名为 chart 的 ref，它指向一个图表实例，并且该实例有 resize 方法
  // 如果 LineChart.vue 组件内部处理了 resize，或者这里没有实际的 chart 实例，这段代码可能需要调整
  // window.addEventListener("resize", () => {
  //   if (chart.value && typeof chart.value.resize === 'function') {
  //     chart.value.resize();
  //   }
  // });
});
</script>

<style scoped lang="scss">
.with-border {
  width: 100%;
  border: 1px solid #ccc;
  padding: 6px;
  border-radius: 16px;
  justify-content: space-around; /* 对于非 flex 容器的直接子元素，此属性无效 */
  /* 如果 el-container 是 flex 容器，则对其子元素生效 */
}

.headToolbar {
  height: 50px;
  align-items: center; /* 对于 flex 容器，使其子元素垂直居中 */
}

.el-row {
  margin-bottom: 6px;
  width: 100%; /* 这个通常是 Element Plus el-row 的默认行为或推荐做法 */
}

.el-row:last-child {
  margin-bottom: 0;
}

/* 你可能需要定义 .no-padding 和 .flex 如果它们没有在全局定义 */
.no-padding {
  padding: 0 !important; /* 示例，确保移除所有内边距 */
}
.flex {
  display: flex; /* 确保 .flex 类使其成为 flex 容器 */
}
</style>
